<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="/js/fileinput.js" type="text/javascript"></script>
<script src="/js/jquery.form.js" type="text/javascript"></script>
<script src="/js/fileinput_locale_zh.js" type="text/javascript"></script>
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
<div id="myVue"></div>
<div style="margin-bottom: 20px;">
	<a href="../admin" class="btn btn-primary btn-lg active" role="button"><返回</a>
</div>
<form id="my_form" action="/admin/full_xc_save" method="post" enctype="multipart/form-data" class="form-horizontal">
	<div style="margin-left: 10%;margin-right: 10%; color: #363b45;border-color: #b35131;">
		<input type="hidden" name="compus" value="{{$request['compus']}}">
		<input type="hidden" name="type" value="{{$request['type']}}">
		@foreach($ques as $k=> $v)
		<div>
	        <label>{{$v['order_num']}} 、 {{$v['ques_title']}}</label>
	       	<p class="text-muted" style="word-break: break-all;margin-right: 10px;margin-left: 16px;">{{$v['ques_desc']}}</p>
	        <div style="margin-left: 10%;">
	            <div class="radio">
	                <label>
	                    <input id="Y_{{$v['id']}}" name="status_{{$v['id']}}" type="radio" value="1" checked="checked">符合</input>
	                </label>
	            </div>
	            <div class="radio">
	                <label>
	                    <input name="status_{{$v['id']}}" type="radio" value="0" id="N_{{$v['id']}}">不符合</input>
	                </label>
	            </div>

	            <div id="div_{{$v['id']}}" style="display: none;">
	            	<div style="margin-bottom: 15px;margin-top: 15PX;">
						问题种类
						<select class="form-control" name="ques_type_{{$v['id']}}">
							@foreach($ques_type as $qk => $qv)
							<option value="{{$qk}}">{{$qv}}</option>
							@endforeach
						</select>
					</div>
					<div style="margin-bottom: 15px;">
						处理部门
						<select class="form-control" name="dep_{{$v['id']}}">
							@foreach($department as $dk => $dv)
							<option value="{{$dk}}">{{$dv}}</option>
							@endforeach
						</select>
					</div>
	            	问题描述：<textarea class="form-control handle_ques_desc" rows="3" id="textarea_{{$v['id']}}" name="ques_desc_{{$v['id']}}" style="margin-bottom: 15px;"></textarea>
	            	
            		<input id="img_{{$v['id']}}" name="img_{{$v['id']}}[]" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1" accept="image/*">
            		<div class="checkbox">
						<label>
							<input type="checkbox" value="1" name="is_handled_{{$v['id']}}">当场处理
						</label>
					</div>
		        </div>
	        </div>
	        <div class="fengexian" style="height: 2px;background-color: #b53131;margin-bottom: 20px;margin-top: 10px;"></div>
			<script type="text/javascript">
				$("#N_{{$v['id']}}").click(function(){
					var s=$("#N_{{$v['id']}}").is(":checked");
					if(s){
						$("#div_{{$v['id']}}").css('display',"block");
						$("#Y_{{$v['id']}}").removeAttr("checked");
						$("#todo_extra_status_{{$v['id']}}").attr("checked",true);	
					}
				})

				$("#Y_{{$v['id']}}").click(function(){
					var s=$("#Y_{{$v['id']}}").is(":checked");
					if(s){
						$("#N_{{$v['id']}}").removeAttr("checked");
						$("#div_{{$v['id']}}").css('display',"none");
						$("#textarea_{{$v['id']}}").val("");
						$('#img_{{$v['id']}}').fileinput('clear');
						$('#img_{{$v['id']}}').fileinput('unlock');
					}
				})
				
				$("#img_{{$v['id']}}").fileinput({
    				showUpload: false,
    				// uploadUrl: 'save.php?action=upload', 
		            language: 'Zh',
		            uploadAsync: false,
		            dropZoneEnabled: false,
					maxFilesNum: 3,
		            showCaption: false,
		            showPreview: true,
		            showRemove: false,
		            previewFileType: "image",
			        browseClass: "btn btn-info btn-block",
			        browseLabel: "选择图片",
			        browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
		            removeFromPreviewOnError:true,                //当文件不符合规则，就不显示预览
		            initialCaption: "请拍照上传异常详情图片",//文本框初始话value
		            allowedFileExtensions: ["jpg", "jpeg", "gif", "png","bmp"],
		            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
				})


			</script>
			
	    </div>
		@endforeach
		<div class="col-xs-8" style="margin-left: 17%;margin-top: 30px;margin-bottom: 50px;">
			<input style="background-color:#b53131;font-size: 30px;" type="submit" class="btn btn-primary btn-block btn-lg" value="提&nbsp;&nbsp;交" name="my_submit" id="my_submit">
		</div>
	</div>
</form>
<script type="text/javascript">
	$("#my_submit").click(function(){
		let bool = false;
		for(let i=0;i<$(".handle_ques_desc:visible").length;i++){
			if(!$(".handle_ques_desc:visible")[i].value){
				bool = true;
			}
		}
		if(bool){
			rc.msg.alert("有问题描述没填写，请填写后再提交！","错误");
			return false;
		}
		
		$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
		$("#my_form").ajaxSubmit({
			beforeSubmit:function(){
				let myVue = new Vue({
					el:"#myVue",
					mounted:function() {
						const loading = this.$loading({
							lock: true,
							text: '正在提交……',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						});
					}
				})
			},
				
			complete: function(xhr) {//完成
				rc.msg.alert("巡场成功！","提示信息",function(){
					window.location.href='/admin';
				});
        	}
        });
	});
	var rc = window.rc || {};
	rc.msg = {
	    alert: function(message, title, callback) {
	        if (title == null) title = "提示信息";
	        rc.msg._show(title,
	            message,
	            null,
	            "alert",
	            function(result) {
	                if (callback) callback(result);
	            });
	    },
	    confirm: function(message,title, callback) {
	        if (title == null) title = "操作确认";
	        rc.msg._show(title,
	            message,
	            null,
	            "confirm",
	            function(result) {
	                if (callback) callback(result);
	            });
	    },
	    _show: function(title, msg, value, type, callback) {
	        var html = "";
	        html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + "</span>";
	        html += '<div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';
	        if (type == "alert") {
	            html += '<input id="mb_btn_ok" type="button" value="确定" />';
	        }
	        if (type == "confirm") {
	            html += '<input id="mb_btn_no" type="button" value="取消" />';
	            html += '<input id="mb_btn_ok" type="button" value="确定" />';
	        }
	        html += "</div></div>";
	 
	        //必须先将_html添加到body，再设置Css样式  
	        $("body").append(html);
	        rc.msg.initCss();
	 
	        switch (type) {
	        case "alert":
	            $("#mb_btn_ok").click(function() {
	                rc.msg._hide();
	                callback(true);
	            });
	            $("#mb_btn_ok").focus().keypress(function(e) {
	                if (e.keyCode == 13 || e.keyCode == 27) {
	                    $("#mb_btn_ok").trigger("click");
	                }
	            });
	            break;
	        case "confirm":
	            $("#mb_btn_ok").click(function() {
	                rc.msg._hide();
	                if (callback) callback(true);
	            });
	            $("#mb_btn_no").click(function() {
	                rc.msg._hide();
	                if (callback) callback(false);
	            });
	            $("#mb_btn_no").focus();
	            $("#mb_btn_ok, #mb_btn_no").keypress(function(e) {
	                if (e.keyCode == 13) $("#mb_btn_ok").trigger("click");
	                if (e.keyCode == 27) $("#mb_btn_no").trigger("click");
	            });
	            break;
	        }
	    },
	    _hide: function() {
	        $("#mb_box,#mb_con").remove();
	    },
	    initCss: function() {
	        $("#mb_box").css({
	            width: "100%",
	            height: "100%",
	            zIndex: "99999",
	            position: "fixed",
	            filter: "Alpha(opacity=60)",
	            backgroundColor: "black",
	            top: "0",
	            left: "0",
	            opacity: "0.6"
	        });
	 
	        $("#mb_con").css({
	            zIndex: "999999",
	            width: "350px",
	            height: "200px",
	            position: "fixed",
	            backgroundColor: "White",
	        });
	 
	        $("#mb_tit").css({
	            display: "block",
	            fontSize: "14px",
	            color: "#444",
	            padding: "10px 15px",
	            backgroundColor: "#fff",
	            borderRadius: "15px 15px 0 0",
	            fontWeight: "bold",
	            "border-bottom": "1px solid #ddd"
	        });
	 
	        $("#mb_msg").css({
	            padding: "20px",
	            lineHeight: "40px",
	            textAlign: "center",
	            fontSize: "18px",
	            color: "#4c4c4c"
	        });
	 
	        $("#mb_ico").css({
	            display: "block",
	            position: "absolute",
	            right: "10px",
	            top: "9px",
	            border: "1px solid Gray",
	            width: "18px",
	            height: "18px",
	            textAlign: "center",
	            lineHeight: "16px",
	            cursor: "pointer",
	            borderRadius: "12px",
	            fontFamily: "微软雅黑"
	        });
	 
	        $("#mb_btnbox").css({ margin: "15px 0px 10px 0", textAlign: "center" });
	        $("#mb_btn_ok,#mb_btn_no").css({
	            width: "80px",
	            height: "30px",
	            color: "white",
	            border: "none",
	            borderRadius: "4px"
	        });
	        $("#mb_btn_ok").css({ backgroundColor: "#b53131" });
	        $("#mb_btn_no").css({ backgroundColor: "gray", marginRight: "40px" });
	 
	 
	        //右上角关闭按钮hover样式  
	        $("#mb_ico").hover(function() {$(this).css({ backgroundColor: "Red", color: "White" });},
	            function() {$(this).css({ backgroundColor: "#DDD", color: "black" });});
	 
	        var width = document.documentElement.clientWidth; //屏幕宽  
	        var height = document.documentElement.clientHeight; //屏幕高  
	 
	        var boxWidth = $("#mb_con").width();
	        var boxHeight = $("#mb_con").height();
	 
	        //让提示框居中  
	        $("#mb_con").css({ top: (height - boxHeight) / 2 + "px", left: (width - boxWidth) / 2 + "px" });
	    }
	};
</script>

